<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>Web components Table</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script data-ui5-config type="application/json">
		{
			"language": "EN"
		}
	</script>

	<script>
		// delete Document.prototype.adoptedStyleSheets
	</script>


	<script src="%VITE_BUNDLE_PATH%" type="module"></script>


</head>

<link rel="stylesheet" type="text/css" href="./styles/TableCustomStyling.css">

<body class="tablecustomstyling1auto">

	<ui5-table class="demo-table" id="tbl">
		<!-- Columns -->
		<ui5-table-column class="title-column" slot="columns">
			<ui5-label>Product</ui5-label>
		</ui5-table-column>

		<ui5-table-column class="supplier-column" slot="columns" min-width="1024" popin-text="Supplier">
			<ui5-label>Supplier</ui5-label>
		</ui5-table-column>

		<ui5-table-column class="dim-column" slot="columns" min-width="800" popin-text="Dimensions" demand-popin>
			<div class="column-content">
				<ui5-label>Dimensions</ui5-label>
			</div>
		</ui5-table-column>

		<ui5-table-column class="weight-column" slot="columns" min-width="640" popin-text="Weight" demand-popin>
			<ui5-label>Weight</ui5-label>
		</ui5-table-column>

		<ui5-table-column class="price-column" slot="columns">
			<ui5-label>Price</ui5-label>
		</ui5-table-column>


		<ui5-table-row id="row1">
			<ui5-table-cell class="title-cell">Notebook Basic 15</ui5-table-cell>
			<ui5-table-cell>Very Best Screens</ui5-table-cell>
			<ui5-table-cell>30 x 18 x 3 cm</ui5-table-cell>
			<ui5-table-cell>4.2 KG</ui5-table-cell>
			<ui5-table-cell class="price-cell">956 EUR</ui5-table-cell>
		</ui5-table-row>

		<ui5-table-row id="row2">
			<ui5-table-cell class="title-cell">Notebook Basic 17</ui5-table-cell>
			<ui5-table-cell>Very Best Screens</ui5-table-cell>
			<ui5-table-cell>40 x 18 x 3 cm</ui5-table-cell>
			<ui5-table-cell>4.6 KG</ui5-table-cell>
			<ui5-table-cell class="price-cell">1956 EUR</ui5-table-cell>
		</ui5-table-row>

		<ui5-table-row id="row3">
			<ui5-table-cell class="title-cell">Notebook Basic 19</ui5-table-cell>
			<ui5-table-cell>Very Best Screens</ui5-table-cell>
			<ui5-table-cell>50 x 18 x 3 cm</ui5-table-cell>
			<ui5-table-cell>4.9 KG</ui5-table-cell>
			<ui5-table-cell class="price-cell">2956 EUR</ui5-table-cell>
		</ui5-table-row>

	</ui5-table>

	<script>
		document.getElementById("tbl").addEventListener("ui5-row-click", function(event) {
			console.log("Row click: ", event.detail.row);
		});
	</script>

</body>

</html>
